<template>
    <div>
        <h2>显示</h2>
        房型名称:<input type="text" v-model="RRinfo.RName">
        房型名称:<select v-model="RRinfo.Nid">
                    <option value="0">请选择</option>
                    <option v-for="item in Rinfo" :value="item.Nid">{{ item.NName }}</option>
                </select>
                <input type="button" value="查询" @click="show">
                <input type="button" value="批量删除" @click="Del">
                <input type="button" value="上架" @click="SJ(1)">
                <input type="button" value="下架" @click="SJ(0)">
                <input type="button" value="导出" @click="DC">
        <table border="1">
            <tbody>
                <tr style="background-color: aqua;">
                    <td>
                        <input type="checkbox" v-model="aaa" @change="all">
                    </td>
                    <td>房型ID</td>
                    <td>房型名称</td>
                    <td>房型图片</td>
                    <td>状态</td>
                    <td>房型创建日期</td>
                    <td>房号</td>
                    <td>联系电话</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in info">
                    <td>
                        <input type="checkbox" :value="item.Rid" :checked="bbb" v-model="ids" @change="Rall">
                    </td>
                    <td>{{ item.Rid }}</td>
                    <td>{{ item.RName }}</td>
                    <td>
                        <img :src="item.Pic" style="max-width: 70px; max-height: 70px;">
                    </td>
                    <td>{{ item.State==true?"上架":"下架" }}</td>
                    <td>{{ item.Date.substring(0,10) }}</td>
                    <td>{{ item.Nid==1?"大床房":"双人间" }}</td>
                    <td>{{ item.Phone}}</td>
                    <td>
                        <input type="button" value="修改" @click="Upd(item.Rid)">
                    </td>
                </tr>
            </tbody>
        </table>
        总条数：<span>{{ data.totalCount }}条</span>
        总页数<span>{{ data.totalPage }}页</span>
        当前第<span>{{ RRinfo.index }}/{{ data.totalPage }}页</span>
        <input type="button" value="首页" @click="page('1')">
        <input type="button" value="上一页" @click="page('2')">
        <input type="button" value="下一页" @click="page('3')">
        <input type="button" value="尾页" @click="page('4')">
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
let router=useRouter();
const info=ref([{
    Rid:0,
    RName:'',
    Pic:'',
    State:true,
    Date:'',
    Nid:0,
    Phone:''
}])

const Rinfo=ref([{
    Nid:0,
    NName:''
}])

const RRinfo=ref({
    RName:'',
    Nid:0,
    index:1,
    size:2
})
const data=ref({
    totalCount:0,
    totalPage:0
})

const page=(str:any)=>{
    switch(str){
        case "1":
            if(RRinfo.value.index==1){
                alert("当前已经是第一页了");
                return;
            }
            RRinfo.value.index=1;
            break;
        case "2":
            if(RRinfo.value.index==1){
                alert("当前已经是第一页了");
                return;
            }
            RRinfo.value.index--;
            break;
        case "3":
            if(RRinfo.value.index==data.value.totalPage){
                alert("当前已经是最后一页了");
                return;
            }
            RRinfo.value.index++;
            break;
        case "4":
            if(RRinfo.value.index==data.value.totalPage){
                alert("当前已经是最后一页了");
                return;
            }
            RRinfo.value.index=data.value.totalPage;
            break;
    }
    show();
}

onMounted(()=>{
    getlist();
    show();
})
const getlist=()=>{
    axios.get('https://localhost:7035/api/RoomType/GetRoomNumber')
    .then(res=>{
        Rinfo.value=res.data;
    })
}

const show=()=>{
    axios.get('https://localhost:7035/api/RoomType/GetRoomType',{
        params:{
            name:RRinfo.value.RName,
            Nid:RRinfo.value.Nid,
            index:RRinfo.value.index,
            size:RRinfo.value.size,
        }
    })
    .then(res=>{
        info.value=res.data.list,
        data.value.totalCount=res.data.totalCount,
        data.value.totalPage=res.data.totalPage
    })
}

const aaa=ref(false);
const bbb=ref(false);
const ids=ref([{}]);

const all=()=>{
    if(aaa.value){
        bbb.value=true;
        ids.value=info.value.map(x=>x.Rid);
    }
    else{
        bbb.value=false;
        ids.value=[];
    }
}

const Rall=()=>{
    if(ids.value.length==info.value.length){
        aaa.value=true;
    }
    else{
        aaa.value=false;
    }
}

const Del=()=>{
    if(ids.value.length==0){
        alert("至少选择一条");
        return;
    }
    if(confirm("确认要删除吗？"))
    {
        axios.get('https://localhost:7035/api/RoomType/DelType',{
            params:{
                ids:ids.value.toString()
            }
        })
        .then(res=>{
            if(res.data>0){
                alert("删除成功");
                show();
            }
            else{
                alert("删除失败");
                return;
            }
        })
    }
}


const SJ=(stateid:number)=>{
    if(ids.value.length==0){
        alert("至少选择一条");
        return;
    }
    if(confirm("确认要修改吗？"))
    {
        axios.get('https://localhost:7035/api/RoomType/updState',{
            params:{
                ids:ids.value.toString(),
                stateid:stateid
            }
        })
        .then(res=>{
            if(res.data>0){
                alert("修改状态成功");
                show();
            }
            else{
                alert("修改状态失败");
                return;
            }
        })
    }
}

const DC=()=>{
    axios.get('https://localhost:7035/api/RoomType/ExeDC',{
        params:{
            fileName:"C:\\Users\\86137\\Desktop\\MonthTwoQD\\房型信息.xlsx"
        }
    })
    .then(res=>{
        if(res.data>0){
            alert("导出成功");
            show();
        }
    })
}

const Upd=(id:any)=>{
    router.push({
        name:'UpdRoomType',
        query:{
            id:id,
        }
    })
}

</script>

<style scoped>

</style>